<template>
  <div>
    <el-form-item
      :label="component.attrName"
      :id="component.attrId"
      prop="100013695.value"
      v-show="formData['100013695'].isshow"
      :required="formData['100013695'].required"
    >
      <el-button-group style="display: flex">
        <template>
          <el-input
            v-model="formData['100013695'].value"
            readonly
            class="hide"
          ></el-input>
          <devperson-grid
            v-for="(item, index) in list"
            :key="index"
            @click="setIndex(index)"
            :index="index"
            :component="component"
            :formKey="index == '0' ? '1688-141000468' : '1689-141000468'"
            v-model="item.value"
            :sqlCode="sqlCode"
            @getrow="getrow"
            :formData="formData"
          />
        </template>
        <el-col :span="4" style="display: flex">
          <el-button
            :type="addType"
            icon="el-icon-plus"
            class="ppm-icon-plus"
            :disabled="addDisabled"
            @click="add"
          ></el-button>
          <el-button
            :type="reduceType"
            icon="el-icon-minus"
            class="ppm-icon-plus"
            :disabled="reduceDisabled"
            @click="reduce"
          ></el-button>
        </el-col>
      </el-button-group>
    </el-form-item>
  </div>
</template>

<script>
import mixinstype20 from "../mixins/mixinstype20";
import devpersonGrid from "./devperson-grid.vue";
import  {deepClone,deepAssign} from "../../utils/clone"
import config from "./config";
export default {
  name: "EnlargeGrid",
  mixins: [mixinstype20],
  components: {
    devpersonGrid,
  },
  data() {
    return {
      index: 0,
      config:{},
      addDisabled: false,
      reduceDisabled: false,
      addType: "primary",
      reduceType: "primary",
    };
  },
  created() {
    this.config = deepClone(config)
    deepAssign(this.formData,this.config);
  },
  computed: {
    list() {
      let data = this.formData["100013695"];
      let values = data.value.split(",");
      let texts = data.text.split(",");
      let arr = [];
      for (let i = 0; i < values.length; i++) {
        arr.push({ value: values[i], text: texts[i] });
      }
      if (arr.length == 2) {
        this.addDisabled = true;
        this.addType = "info";
        this.reduceDisabled = false;
        this.reduceType = "primary";
      }
      if (arr.length == 1) {
        this.reduceDisabled = true;
        this.reduceType = "info";
        this.addDisabled = false;
        this.addType = "primary";
        //清空第二发展人的值
        this.formData["1689-141000467"].value = ''; 
        this.formData["1689-141000468"].value = ''; 
      }
      return arr;
    },

    
  },
  methods: {
    // 添加元件
    add() {
      let data = this.formData["100013695"];
      let values = data.value.split(",");
      values.length++;
      data.value = values.join(",");
      let texts = data.text.split(",");
      texts.length++;
      data.text = texts.join(",");
    },
    // 删除元件
    reduce() {
      let data = this.formData["100013695"];
      let values = data.value.split(",");
      values.length--;
      data.value = values.join(",");
      let texts = data.text.split(",");
      texts.length--;
      data.text = texts.join(",");
    },
    getrow(row, index) { 
      let arr = [...this.list];
      let values = [],
        texts = [];
      for (let i = 0; i < arr.length; i++) {
        if (i == index) {
          arr[i].value = row.SALES_CODE;
          arr[i].text = row.STAFF_NAME;
        }
        values.push(arr[i].value);
        texts.push(arr[i].text);
      }
      this.formData["100013695"].value = values.join(",");
      this.formData["100013695"].text = texts.join(",");
      this.$emit("getPluginValue", { row, index }, "100013695"); //事件扩展
      this.getPluginValue({ row, index }, "100013695"); //本地调用
    },
    getPluginValue(obj, key) {
      if (key == "100013695") {
        //发展人信息
        if (obj.index == "0") {
          //第一发展人
          this.formData["1688-141000467"].value = obj.row.CHANNEL_NBR; //渠道编码
          this.formData["1688-141000468"].value = obj.row.SALES_CODE; //发展人标识
        }
        if (obj.index == "1") {
          //第二发展人
          this.formData["1689-141000467"].value = obj.row.CHANNEL_NBR; //渠道编码
          this.formData["1689-141000468"].value = obj.row.SALES_CODE; //发展人标识
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hide {
  z-index: 0;
  visibility: hidden;
  width: 1px;
}
</style>
